<template>
	<view class="news" :class="addType == 0 ? 'news_zero': addType == 1 ? 'news_one': addType == 2 ? 'news_two': addType == 3 ? 'news_three': addType == 4 ? 'news_four':'news_other'">
		<view v-if="list.length == 0" class="none">
			<i class="iconfont iconwujilu" v-show="addType != 0"></i>
			<text>暂无数据</text>
		</view>
		<view class="newItem" v-for="(item,index) in list" :key="index" @tap="preview(item)" v-if="item.black_state == false || !item.black_state">
			<view class="new">
				
				<view class="top1" v-if="stateType == 2">
					<view class="new_title" v-if="item.im_title">{{item.im_title}}</view>
				</view>
				
				<view class="top1" v-else>
					<view class="new_title" v-if="item.title" :class="[item.imgList && item.imgList.length == 1 ? 'newShort': '']">{{item.title}}</view>
					<!-- 发布类型且发布内容含有一张图片 -->
					<view class="new_image" v-if="item.type == 1 && item.imgList && item.imgList.length == 1 && (!item.videoList || (item.videoList && item.videoList.length == 0))">
						<image :src="item.imgList[0]" mode="scaleToFill"></image>
					</view>
				</view>
				
				
				<!-- 发布类型且发布内容含有两张以上图片 -->
				<view class="imgs" v-if="item.type == 1 && item.imgList && item.imgList.length >= 3 && (!item.videoList || (item.videoList && item.videoList.length == 0))">
					<image :src="img" mode="scaleToFill" v-for="(img,imgIndex) in item.imgList" :key="imgIndex" v-if="imgIndex < 3"></image>
				</view>
				
				<!-- 发布含视频 -->
				<view v-if="(item.type == 1 && item.article_video == 1 && item.videoList && item.videoList.length > 0) || item.article_video == 2">
					<!-- <video :src="video" v-for="(video,videoIndex) in item.videoList" :key="videoIndex" controls></video> -->
					<view class="videoBg">
						<image mode="aspectFill" :src="item.img_url"></image>
						<i class="iconfont iconbofangsanjiaoxing"></i>
					</view>
				</view>
				
				<!-- 转发 -->
				<view class="from" v-if="item.type == 2">
					<view class="fromInfo">
						<!-- 被转发者头像 -->
						<image :src="item.subhead_avatar ? item.subhead_avatar : defimg"></image>
						<!-- 被转发者昵称及发布时间 -->
						<view>
							<view class="fromInfo_name">{{item.subhead_nicheng ? item.subhead_nicheng : '未设置昵称'}}</view>
							<view class="fromInfo_time">{{item.ftime}}</view>
						</view>
					</view>
					<!-- 被转发者发布的文章标题及图片 -->
					<view class="fromCont">
						<view class="title" :class="[item.img_url? 'titleShort':'']">{{item.subhead_title}}</view>
						<image :src="item.img_url"></image>
					</view>
				</view>
				
				<!-- 新闻发布信息 -->
				<view class="new_Info" v-if="stateType == 0 && addType != 999">
					<view class="info_top" v-if="item.is_top == 2">置顶</view>
					<view class="info_tip" v-if="item.article_name">{{item.article_name}}</view>
					<view class="info_from">{{item.nicheng ? item.nicheng : '未设置昵称'}}</view>
					<view class="info_num">{{item.commentnum}}评论</view>
					<view class="info_time">{{item.time}}</view>
				</view>
				<view class="new_Info" v-if="stateType == 1">
					<view class="info_top" v-if="item.is_top == 2">置顶</view>
					<view class="info_tip" v-if="item.typeName">{{item.typeName}}</view>
					<view class="info_time">{{item.time}}</view>
				</view>
				<view class="new_Info" v-if="stateType == 2">
					<view class="info_tip" v-if="item.im_type_name">{{item.im_type_name}}</view>
					<view class="info_from">{{item.nicheng ? item.nicheng : '未设置昵称'}}</view>
					<view class="info_time">{{item.time}}</view>
				</view>
				<view class="new_Info" v-if="stateType == 3">
					<view class="info_top" v-if="item.is_check == 2 && item.is_top == 2">置顶</view>
					<view class="info_tip" v-if="item.article_name">{{item.article_name}}</view>
					<view class="info_state">{{item.is_check == 1 ? '待审核':item.is_check == 2 ? '已通过' : item.is_check == 3 ? '违规':''}}</view>
					<view class="info_time">{{item.time}}</view>
				</view>
				<view class="nums" v-if="stateType == 3 && item.is_check == 2">
					<view class="num">点赞{{item.likenum}}</view>
					<view class="num">评论{{item.commentnum}}</view>
					<view class="num">转发{{item.transpondnum}}</view>
					<view class="num">阅读量{{item.readnum}}</view>
				</view>
			</view>
		</view>
		<uni-load-more v-if="list.length >= 5" :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		props: {
			list: Array,
			status: String,
			contentText: Object,
			stateType: String, // 0为默认抖教文章 
			addType: String //附加条件: 0+0为首页抖教推荐  0+1为智囊团  1+3为家文化&孩子-目标、成长、才艺  2+2为育儿经&育儿经-我的  3+4为我的智囊团 0+999为机构资讯
		},
		watch: {
			list(newValue, oldValue) {
				this.list.forEach((item,index)=>{
					if(this.stateType == 2) {
						item.im_title = item.im_title.replace(/amp;/g, '').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/[, ]/g,'');
					} else {
						item.title = item.title.replace(/amp;/g, '').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/[, ]/g,'');
					}
					if (item.subhead_creat_time) {
						item.ftime = util.getBriefTime(item.subhead_creat_time);
					}
				})
			}
		},
		methods: {
			preview(item) {
				var id = '';
				var url = '';
				if ((this.stateType == 0 && this.addType != 999) || this.stateType == 3) {
					id = item.article_id
				} else if (this.stateType == 1) {
					id = item.patriarch_article_id
				} else if (this.stateType == 2) {
					id = item.im_id
				} else if (this.addType == 999) {
					id = item.information_id
				}
				if (item.article_video_id) {
					id = item.article_video_id
					if (item.article_video == 2) {
						// 跳转视频页面
						uni.navigateTo({
							url: '../../pages/topic/videoDetail?index=0&pagesize=1&type=1&users_type=1&article_video_id=' + id
						})
						return
					}
				}
				if (this.stateType == 2 && item.is_show != 1) {
					url = '/pages/articleModule/article-detail?stateType=' + this.stateType + '&addType=' + this.addType +
						'&article_id=' + id + '&releaseType=' + item.is_show
				} else {
					var adminUserId = '';
					if(this.addType == 999){
						adminUserId = item.admin_user_id;
					}
					url = '/pages/articleModule/article-detail?stateType=' + this.stateType + '&addType=' + this.addType +
						'&article_id=' + id +'&admin_user_id=' + adminUserId
				}
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.news {
		width: 100%;
		padding: 0 30upx 120upx 30upx !important;
		width: calc(100% - 60upx);
	}

	.none {
		color: #999999;
		text-align: center;
	}

	.none .iconwujilu {
		color: #E5E5E5;
		font-size: 306upx;
		line-height: 1;
		display: block;
	}

	.none text {
		color: #E5E5E5;
		font-size: 46upx;
		display: block;
	}

	.newItem {
		border-top: 2upx solid #E5E5E5;
		padding: 40upx 0;
	}

	.newItem:first-child {
		border-top: 0upx solid #FFFFFF;
	}

	.new {
		width: 100%;
	}

	/* 标题 */
	.top1 {
		display: flex;
		justify-content: space-between;
	}

	.new_title {
		width: 100%;
		color: #333333;
		font-size: 34upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 2;
	}

	.newShort {
		width: 75%;
	}

	.new_image image {
		width: 136upx;
		height: 136upx;
	}

	/* 图片合集 */
	.imgs {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30upx;
	}

	.imgs image {
		width: 224upx;
		height: 184upx;
	}

	video {
		width: 690upx !important;
	}

	/* 转发 */
	.from {
		width: 100%;
		height: 200upx;
		background: #FAFAFA;
		margin-top: 30upx;

		.fromInfo {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 20upx 0 0 20upx;

			& image {
				width: 72upx;
				height: 72upx;
				margin-right: 20upx;
				border-radius: 50%;
			}

			.fromInfo_name {
				color: #333333;
				font-size: 30upx;
				line-height: 1.2;
			}

			.fromInfo_time {
				color: #999999;
				font-size: 22upx;
				line-height: 1.2;
			}
		}

		.fromCont {
			display: flex;
			justify-content: space-between;
			margin-left: 20upx;
			position: relative;
			bottom: 0;

			.title {
				width: 100%;
				color: #333333;
				font-size: 32upx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.titleShort {
				width: 75% !important;
			}

			& image {
				width: 120upx;
				height: 120upx;
			}
		}
	}

	/* 信息详情 */
	.new_Info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 10upx 0;

		& view {
			margin-right: 20upx;
			white-space: nowrap;
		}

		.info_top {
			color: #F25252;
			font-size: 26upx;
		}

		.info_tip {
			color: #00D5A2;
			padding: 4upx 8upx;
			border: 2upx solid #00D5A2;
			border-radius: 24upx;
			line-height: 1;
			font-size: 24upx;
		}

		.info_from,
		.info_state,
		.info_num,
		.info_time {
			color: #999999;
			font-size: 26upx;
		}
	}

	.nums {
		display: flex;
		justify-content: flex-start;
		padding-top: 10upx;
	}

	.num {
		margin-right: 30upx;
		color: #999999;
		font-size: 26upx;
	}

	.news_zero {
		// width: 100%;
		padding: 0 30upx !important;

		.none {
			margin-top: 0;

			&text {
				color: #999999;
				text-align: center;
				line-height: 113px;
				font-size: 28upx;
			}
		}

		.newItem {
			padding: 0 0 20upx;
		}
	}

	.news_one {
		width: 690upx;
		margin: auto;
		margin-top: 200upx;
	}

	.news_two {
		margin-top: 110upx;

		.newItem {
			padding: 0 30upx 20upx;
		}
	}

	.news_three {
		padding-bottom: 140upx;
		background-color: #FFFFFF;

		.newItem {
			margin: 0 30upx;
			padding: 36upx 0upx 20upx;
		}
	}

	.news_four {
		margin-top: 106upx;

		.newItem {
			border-top: none;
			margin-top: 16upx;
			padding: 20upx 30upx;
			background-color: #FFFFFF;
		}
	}

	.news_other {
		padding: 0 30upx 120upx 30upx !important;
		width: calc(100% - 60upx);
	}

	.videoBg {
		position: relative;
		width: 600upx;
		height: 360upx;
		line-height: 360upx;
		background: #000000;
		text-align: center;
		opacity: 0.8;

		image {
			left: 0;
			width: 100%;
			height: 100%;
			position: absolute;
		}

		& i {
			position: absolute;
			z-index: 999;
			color: #00D5A2;
			font-size: 60upx;
			text-align: center;
		}
	}
</style>
